import React, { useState } from 'react';
import type { StockRecord, StockFormData } from '../types/stock';
import StockForm from '../components/StockForm';
import StockList from '../components/StockList.tsx';

const StockRecords: React.FC = () => {
  const [records, setRecords] = useState<StockRecord[]>([]);

  const addRecord = (formData: StockFormData) => {
    const newRecord: StockRecord = {
      ...formData,
      id: Date.now().toString(),
    };
    setRecords(prev => [...prev, newRecord]);
  };

  const updateRecord = (id: string, updatedRecord: Partial<StockRecord>) => {
    setRecords(prev => 
      prev.map(record => 
        record.id === id ? { ...record, ...updatedRecord } : record
      )
    );
  };

  const deleteRecord = (id: string) => {
    setRecords(prev => prev.filter(record => record.id !== id));
  };

  return (
    <div className="w-full h-full">
      <div className="page-header">
        <h1>交易记录</h1>
        <p>管理您的股票买入记录和交易状态</p>
      </div>
      
      <div className="grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-8 h-[calc(100vh-200px)]">
        <div className="lg:sticky lg:top-8 h-fit">
          <div className="section-card">
            <div className="section-header">
              <h2>
                <i className="i-mdi-plus-circle text-xl"></i>
                添加新记录
              </h2>
            </div>
            <StockForm onSubmit={addRecord} />
          </div>
        </div>
        
        <div className="flex flex-col h-full">
          <div className="section-card flex-1 flex flex-col">
            <div className="section-header">
              <h2>
                <i className="i-mdi-chart-line text-xl"></i>
                记录列表
              </h2>
              <span className="record-count">共 {records.length} 条记录</span>
            </div>
            <StockList 
              records={records}
              onUpdate={updateRecord}
              onDelete={deleteRecord}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default StockRecords;